<template>
    <div>
        <Title title="图册管理"></Title>

        <div class="detail">
            <!--            左侧图片展示部分-->
            <div class="swippre">
                <seep v-bind:newList = "newList"></seep>
            </div>
            <!--            右侧图片信息部分-->
            <div class="minute">
                <img :src="`data:image/gif;base64,${this.$route.query.newItem.thumbnail}`" alt="">
                <p class="titleName">{{this.$route.query.newItem.fileName}}</p>
                <div class="xian"></div>
                <p class="mes">
                    信息
                </p>
                <div class="neirong">
                    <p style="float: left">创建时间</p>
                    <p style="float: right">{{this.$route.query.newItem.createDate}}</p>
                </div>
                <div class="neirong">
                    <p style="float: left">修改时间</p>
                    <p style="float: right">{{this.$route.query.newItem.updateDate}}</p>
                </div>
                <div class="neirong">
                    <p style="float: left">页数</p>
                    <p style="float: right">{{this.$route.query.newItem.pageNumber}}</p>
                </div>
                <div class="neirong">
                    <p style="float: left">内容创作者</p>
                    <p style="float: right">{{this.$route.query.newItem.operator}}</p>
                </div>
                <div class="neirong">
                    <p style="float: left">大小</p>
                    <p style="float: right">{{this.$route.query.newItem.fileSize}}</p>
                </div>
                <div class="neirong">
                    <p style="float: left">文件类型</p>
                    <p style="float: right">图集</p>
                </div>
            </div>

        </div>
    </div>
</template>

<script>
    import Title from "../../components/title";
    import seep from "../../components/seePPTX/seePPTX";
    import { queryGally} from "../../api/api";

    export default {
        name: 'dateView',
        data() {
            return {
                list:[],
                newList:[]
            };
        },

        methods: {
        },
        created() {
            //获取查看单个图册
            console.log(this.$route.query.newItem)
            console.log(this.$route.query.atlasId)
            queryGally(this.$route.query.atlasId).then(res=>{
                console.log(res)
                this.newList = res.list
                console.log(this.newList)
            })
        },
        components: {
            Title,
            seep
        }
    }
</script>

<style scoped lang="less">

    * {
        box-sizing: border-box;
    }

    .detail {
        width: 1136px;
        height: 758px;
        /*background: #FFFFFF;*/
        border-radius: 2px;
        border: 1px solid #E9E9E9;
    }

    .swippre {
        width: 866px;
        height: 741px;
        background: #FFFFFF;
        float: left;
    }

    /*右侧详细信息*/
    .minute {
        width: 266px;
        height: 758px;
        float: right;
        background: #FFFFFF;
        text-align: center;
    }

    img {
        width: 215px;
        height: 110px;
        margin-top: 19px;
    }

    .titleName {
        width: 224px;
        margin-left: 19px;
        margin-top: 16px;
        height: 22px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.65);
        /*line-height: 22px;*/
        margin-bottom: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .xian {
        width: 220px;
        height: 1px;
        background: #E8E8E8;
        margin: 16px auto;
    }

    .mes {
        width: 28px;
        height: 22px;
        font-size: 14px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #000000;
        line-height: 22px;
        margin-left: 19px;
        margin-bottom: 8px;
    }

    .neirong {
        width: 220px;
        height: 38px;
        margin: 0 auto;
        border-bottom: 1px solid #E8E8E8;
        p{
            height: 22px;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(0, 0, 0, 0.65);
            line-height: 22px;
            margin-top: 8px;
            margin-bottom: 0;
        }

    }
</style>
